<template>
  <div>
    <my-rate :count="2" :activeCount="count" />
    <my-rate :count="10" :activeCount="count2" @onChange="onChange" />
    <my-rate />

    <Header>
      <template #default="user">
        <h1>哈哈哈哈，今天有点热</h1>
        <h2>呵呵， 确实热</h2>
        <input type="text" placeholder="哈哈哈" />
        <p>{{ user.name }}</p>
      </template>

      <template #my-header>
        <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
        </ul>
      </template>
      <template #my-footer>
        <b>首页</b>
        <b>购物车</b>
        <b>我的</b>
      </template>
    </Header>
  </div>
</template>

<script>
import MyRate from "./components/MyRate.vue";
import Header from "./components/Header.vue";
export default {
  components: {
    MyRate,
    Header
  },
  data() {
    return {
      count: 1,
      count2: 8
    };
  },
  methods: {
    onChange(v) {
      console.log(v);
      this.count2 = v;
    }
  }
};
</script>